<!--  -->
<script lang="ts" setup>
import { ref, reactive, defineComponent } from 'vue'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { message, UploadChangeParam, UploadProps } from 'ant-design-vue'

interface FormState {
  id: Number
  name: string
  age: number
  address: string
  avatar: string
}

defineComponent({
  components: {
    PlusOutlined,
    LoadingOutlined,
  },
})

const columns = [
  {
    title: '编号',
    dataIndex: 'id',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]

const createFormData = () => ({
  id: 0,
  name: '',
  age: 0,
  address: '',
  avatar: '',
})

const data = ref([
  {
    id: 1,
    name: 'name1',
    age: 12,
    address: '444',
    avatar:
      '',
  },
] as FormState[])
// let formState = reactive(createFormData())

let formState = reactive<FormState>({
  id: 0,
  name: '',
  age: 0,
  address: '',
  avatar: '',
})
const visible = ref<boolean>(false)

const fileList = ref([])
const loading = ref<boolean>(false)

/**
 * 上传图片
 */
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result as string))
  reader.readAsDataURL(img)
}
function beforeUpload(file: UploadProps['fileList'][number]) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('只可以上传jpg、png的图片~')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('请上传小于2M的图片')
  }
  return isJpgOrPng && isLt2M
}
function handleChange(info: UploadChangeParam) {
  if (info.file.status === 'uploading') {
    loading.value = true
  }
  if (info.file.status === 'done') {
    getBase64(info.file.originFileObj, (base64Url: string) => {
      formState.avatar = base64Url
      loading.value = false
    })
  }
  if (info.file.status === 'error') {
    loading.value = false
    message.error('upload error')
  }
}

/**
 * 打开添加联系人弹窗
 */
function addCustomer() {
  visible.value = true
  Object.assign(formState, createFormData())
}

function editPerson(record: any) {
  Object.assign(formState, record)
  visible.value = true
}

/**
 *保存联系人
 */
function handleOk() {
  visible.value = false
  formState.id = formState.id == 0 ? data.value.length + 1 : formState.id
  data.value = [...data.value, { ...formState }]
}
</script>

<template>
  <div class="btn-box">
    <a-button type="primary" @click="addCustomer">
      <template #icon><plus-outlined /></template>
      添加联络人
    </a-button>
  </div>
  <div>
    <a-table :columns="columns" :data-source="data" :bordered="true">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex == 'id'">
          <span @click="editPerson(record)">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex == 'avatar'">
          <img :src="record.avatar" alt="头像" />
        </template>
      </template>
    </a-table>
  </div>
  <a-modal v-model:visible="visible" title="添加联络人" @ok="handleOk">
    <a-form
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :model="formState"
    >
      <a-form-item label="用户名" name="Name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="头像" name="avatar">
        <a-upload
          v-model:file-list="fileList"
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="formState.avatar" :src="formState.avatar" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="年龄" name="Name">
        <a-input-number v-model:value="formState.age" :min="0" :max="150" />
      </a-form-item>
      <a-form-item label="住址" name="address">
        <a-input v-model:value="formState.address" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="scss" scoped>
.btn-box {
  padding-bottom: 12px;
}
</style>
